<template>
	<view>
		<view class="example-body"><uni-steps tap="test" :options="list1" active-color="#007AFF" :active="active" /></view>

		<view class="cur-status">
			<view class="block base">
				<view class="block-title">商品信息</view>
				<view class="block-content">
					<image mode="aspectFit" :src="detail.src"></image>
					<view class="content">
						<view class="content-title">{{ detail.title }}</view>

						<view class="content-attr">
							<view>材质：</view>
							{{ detail.val1 }}
						</view>
						<view class="content-attr">
							<view>规格：</view>
							{{ detail.val2 }}
						</view>
						<view class="content-attr">
							<view>风格：</view>
							{{ detail.val3 }}
						</view>
						<view class="content-attr">
							<view>品牌：</view>
							{{ detail.val4 }}
						</view>
						<view class="content-attr">
							<view>颜色：</view>
							{{ detail.val5 }}
						</view>
					</view>
				</view>
			</view>

			<view class="block">
				<view class="block-title">客户信息</view>
				<view class="block-content">
					<view class="content-attr">
						<view>预约安装日期：</view>
						{{ detail.val6 }}
					</view>
					<view class="content-attr">
						<view>收货地址：</view>
						{{ detail.val7 }}
					</view>
					<view class="content-attr">
						<view>详细地址：</view>
						{{ detail.val8 }}
					</view>
				</view>
			</view>

			<view class="block">
				<view class="block-title">工人测量信息</view>
				<view class="block-content">
					<view class="content-attr">
						<view>长度：</view>
						{{ detail.val9 }}
					</view>
					<view class="content-attr">
						<view>高度：</view>
						{{ detail.val0 }}
					</view>
					<view class="content-attr">
						<view>计费面积：</view>
						{{ detail.val11 }}
					</view>
					<view class="content-attr">
						<view>预计人工费：</view>
						{{ detail.val12 }}
					</view>
				</view>
			</view>
			<view class="block">
				<view class="block-title">安装信息</view>
				<view class="block-content">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left">当前选择</view>
						<view class="uni-list-cell-db">
							<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
								<view class="uni-input">{{ date }}</view>
							</picker>
						</view>
					</view>
				</view>
			</view>

			<!-- <view class="block">
				<view class="block-title">复尺信息</view>
				<view class="block-content">
				
				<form @submit="formSubmit" @reset="formReset">
					<view class="uni-form-item uni-column">
					
						<input class="uni-input" name="width" placeholder="请输入长度" />
					</view>
					<view class="uni-form-item uni-column">
						
						<input class="uni-input" name="height" placeholder="请输入高度" />
					</view>
					
					<view class="uni-form-item uni-column">
						<view class="title">*实际尺寸与业主测量差额¥100.00元，需客户进行补差价！</view>
						<radio-group name="difference">
							<label>
								<radio value="1" /><text>客户确定补差价</text>
							</label>
							<label>
								<radio value="2" /><text>误差较小，无需客户补差价</text>
							</label>
						</radio-group>
					</view>
					
					
					
					<drawing></drawing>
					<view class="uni-btn-v">
						<button form-type="submit">复尺完成</button>
					
					</view>
				
				</form>
				
				</view>
			</view>
			 -->
			<!-- <view class="order-btn" @tap="done">
				复尺完成
			</view> -->
		</view>
		<view class="toggel-next" @tap="done">
			<view class="tip">{{ toggel_tip }}</view>
			<view class="btn">安装完成</view>
		</view>
	</view>
</template>

<script>
import uniSteps from '@/components/uni-steps/uni-steps.vue';
import uniSection from '@/components/uni-section/uni-section.vue';
import drawing from '@/pages/API/image/drawing.vue';
var graceChecker = require('../../common/graceChecker.js');
export default {
	components: {
		uniSection,
		uniSteps,
		drawing
	},
	data() {
		return {
			active: 3,
			list1: [
				{
					title: '待支付',
					desc: '2018-11-11'
				},
				{
					title: '待测量',
					desc: '2018-11-13'
				},
				{
					title: '待收货',
					desc: '2018-11-14'
				},
				{
					title: '待安装',
					desc: '2018-11-15'
				},
				{
					title: '已完成',
					desc: '2018-11-18'
				}
			],
			list2: [
				{
					title: '待支付',
					desc: '2018-11-11'
				},
				{
					title: '待发货',
					desc: '2018-11-14'
				},
				{
					title: '待收货',
					desc: '2018-11-15'
				},
				{
					title: '已完成',
					desc: '2018-11-18'
				}
			],
			detail: {
				src: 'http://www.gdredoak.com/upload/201810/16/201810161616381484.jpg',
				title: '落地窗',
				val1: '断桥铝',
				val2: '断桥铝',
				val3: '欧式',
				val4: '凤铝',
				val5: '白色',

				val6: '2020-06-30',
				val7: '江苏省  苏州市  吴江区',
				val8: '千邑悦庭11栋305',

				val9: '长度',
				val0: '高度',
				val11: '计费面积',
				val12: '预计人工费'
			},

			date: getDate({
				format: true
			}),
			startDate: getDate('start'),
			endDate: getDate('end'),
			time: '12:01',
			toggel_tip: '*此订单有￥100.00元客户差价未补，补差价后此提示消失！当前请勿进行安装！'
		};
	},
	methods: {
		change() {
			if (this.active < this.list1.length - 1) {
				this.active += 1;
			} else {
				this.active = 0;
			}
		},
		test(e) {
			debugger;
		},
		formSubmit: function(e) {
			console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value));
			//定义表单规则
			var rule = [
				{ name: 'width', checkType: 'notnull', checkRule: '', errorMsg: '请填写宽度' },
				{ name: 'height', checkType: 'notnull', checkRule: '', errorMsg: '请填写高度' }
				//{name:"difference", checkType : "in", checkRule:"客户确定补差价,误差较小，无需客户补差价",  errorMsg:"请选择性别"},
			];
			//进行表单检查
			var formData = e.detail.value;
			var checkRes = graceChecker.check(formData, rule);
			if (checkRes) {
				uni.showToast({ title: '验证通过!', icon: 'none' });
			} else {
				uni.showToast({ title: graceChecker.error, icon: 'none' });
			}
		},
		formReset: function(e) {
			console.log('清空数据');
		},
		done: function(e) {
			uni.showModal({
				title: "提示",
				content: "确定安装完成吗？",
				showCancel: false,
				confirmText: "确定",
				success: function (res) {
				        uni.navigateTo({
				            url: 'installDone'
				        });
				    }
			})
		},
		bindDateChange: function(e) {
			this.date = e.target.value;
		}
	}
};
</script>

<style>
.example-info-text {
	font-size: 14px;
	line-height: 20px;
	color: #3b4144;
}

.example-body {
	flex-direction: column;
	padding: 15px;
	background-color: #ffffff;
}

.word-btn-white {
	font-size: 18px;
	color: #ffffff;
}

.word-btn {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	height: 48px;
	margin: 15px;
	background-color: #007aff;
}

.word-btn--hover {
	background-color: #4ca2ff;
}

.status-btn {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
	justify-content: center;
	height: 92rpx;
	margin: 30rpx;
	background-color: #007aff;
}

.example-body {
	/* #ifndef APP-NVUE */
	display: block;
	/* #endif */
	padding: 15px;
	flex-direction: row;
}

uni-view {
	font-size: 12px;
}
image {
	width: 200rpx;
	height: 200rpx;
	margin: 0 30rpx;
}
.block {
	padding: 20rpx;
	background-color: #fff;
	margin: 20rpx;
	border-radius: 20rpx;
}
.block-title {
	font-weight: bolder;
	margin-bottom: 20rpx;
}
.block-content {
	display: flex;
	flex-direction: column;
}
.base .block-content {
	display: flex;
	flex-direction: row;
}

.content {
}
.content-title {
}
.content-attr {
	color: #9f9e9e;
	float: left;
	width: 80%;
}
.content-attr view {
	float: left;
	width: 30%;
	text-align: right;
}
.base .content-attr {
	width: 45%;
}
.base .content-attr view {
	width: auto;
}
.toggel-next {
	width: 100%;
	height: 90rpx;
	position: fixed;
	bottom: 0px;
	background-color: #fff;
}

.toggel-next .tip {
	width: 70%;
	height: 90rpx;
	float: left;
	bottom: 0px;
	    color: #c81003;
}

.toggel-next .btn {
	width: 30%;
	float: left;
	text-align: center;
	color: #fff;
	font-size: 1rem;
	line-height: 90rpx;
	background-color: #ff5722;
	
}
</style>
